<template>
<div class="plugin-management views-container">
  <div class="wlm-table">
    <div class="wlm-table-hearder-btn">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item v-for="(item) in platformList" :key="item.name" :index="item.name">商城</el-menu-item>
      </el-menu>
    </div>
    <div class="wlm-table-content">
      <el-carousel ref="carousel" arrow="never" :autoplay="false" trigger="click" height="150px">
        <el-carousel-item v-for="item in platformList" :key="item.name" :name="item.name">
          <!-- <h3>{{item.name}}{{activeIndex}}</h3> -->
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in 7" :key="index">
              <div class="plugin-item flex-row">
                <img class="item-img" src="http://we7.weliam.cn/attachment/wx61b7350b8f550d0f/avatar.jpg" alt="">
                <div class="flex-col scale-grow" style="position: relative;">
                  <div>
                    <div class="flex-row flex-justify-b">
                      <div class="item-title">拼团</div>
                      <div>
                        <el-switch v-model="value2"></el-switch>
                      </div>
                    </div>
                  </div>
                  <div class="item-help">商城 > 营销</div>
                  <div class="item-text">去中心化处理小程序内用户间各类型纠纷和争议的用户票选工具，避免恶意差评的必备</div>
                  <div class="item-btn">编辑</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</div>
</template>

<script>
import {
  staffManage,
  staffDel
} from '@/api/setting'
import waves from '@/directive/waves' // Waves directive
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'PluginManagement',
  components: {

  },
  directives: {
    waves
  },
  data() {
    return {
      activeIndex: 'shang',
      platformList: [{
        name: 'shang',
        data: []
      }, {
        name: 'tongcheng',
        data: []
      }],
      tableFormatData: {
        current: 'employee',
        employee: {
          key: 'employee',
          api: {
            getList: staffManage,
            delList: staffDel
          },
          tableData: [],
          files: {
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            pindex: 1,
            psize: 10,
            pagesizes: [10, 20, 50],
            total: 10
          }
        }
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$refs.carousel.setActiveItem(key)
    }
  }
}
</script>

<style lang="scss" scoped>
.plugin-management {
  font-size: 14px;

  .plugin-item {
    height: 150px;
    border: 1px solid rgb(236, 236, 236);
    background-color: rgb(252, 252, 252);
    padding: 18px 24px;
    border-radius: 3px;

    .item-img {
      height: 50px;
      width: 50px;
      border-radius: 50px;
      margin-right: 14px;
    }

    .item-title {
      font-size: 16px;
      font-weight: 600;
    }

    .item-help {
      color: rgb(154, 154, 154);
      margin: 2px 0;
    }

    .item-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .item-btn {
      position:absolute;
      bottom: -2px;
      right: 0;
      color: #409eff;
      cursor: pointer;
    }
  }
}
</style>
